<template>
  <H-table
    v-model="pageRequest.pageNum"
    :pageSize.sync="pageRequest.pageSize"
    :data="dataList"
    :columns="columns"
    :loading="loading"
    @getPageList="getPageList"
    :isPagination="true"
    :total="total"
    :showNo="true"
    :ids.sync="ids"
  >
    <template slot="status" slot-scope="item">
      {{ item.scope.row['status'] ? '完成' : '未完成' }}
    </template>

    <template slot="oper" slot-scope="item">
      <el-button
        type="text"
        icon="el-icon-edit"
        size="small"
        @click="onEdit('edit', item.scope.row)"
      >
        编辑
      </el-button>
      <el-button size="small" type="text" icon="el-icon-view"> 查看</el-button>
    </template>
  </H-table>
</template>
<script>
// 引入表格的json数据
const res = require('./json/tablist.json')
export default {
  data() {
    return {
      ids: [],
      loading: false,
      pageNum: 0,
      pageRequest: { start: 0, size: 10 },
      dataList: [],
      filters: {},
      total: 0,
      delIds: [], // 要删除的ids
      // 表格列表字段配置
      columns: [
        { prop: 'id', label: '场地ID', minWidth: 50 },
        { prop: 'customVenueName', label: '场地名称', minWidth: 120 },
        { prop: 'type', label: '会场类型', minWidth: 60 },
        { slot: 'status', label: '状态', minWidth: 100 },
        // 操作
        { slot: 'oper', label: '操作', minWidth: 150 },
      ],
    }
  },
  mounted() {
    this.getPageList()
  },
  created() {},
  methods: {
    // 获取分页数据
    getPageList: function() {
      console.log('当前pageNum', this.pageNum)
      console.log('接口入参', res.data)
      this.dataList = res.data.items
      this.total = res.data.total
    },
    onEdit(isEdit, rowItem) {
      this.$confirm('确认要编辑这条信息嘛?', '提示', {
        type: 'warning',
      }).then(() => {
        console.log('rowItem==>', rowItem)
      })
    },
  },
}
</script>
<style></style>
